<template>
  <div class="content">
  <el-tabs type="card">
    <el-form label-width="" v-model="demo">
        <el-row id="compay"></el-row>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="分类" prop="grade.label">
          </el-table-column>
          <el-table-column align="center" label="课程名称" prop="name">
          </el-table-column>
          <el-table-column align="center" label="所属课程" prop="lessonCount">
          </el-table-column>
          <!-- <el-table-column align="center" label="图片" prop="cover.url">
          </el-table-column> -->
          <el-table-column label="图片" width="210">
                <template scope="scope">
                    <img :src="scope.row.cover.url" width="210" height="154" class="head_pic"/>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-list">
          <div class="table-list-text" width="100">
            <p>课件内容</p>
          </div>
          <div class="table-list-content">
            <el-table :data="courseData" border fit highlight-current-row style="width: 100%">
              <el-table-column align="center" label="分类" prop="lesson.label">
              </el-table-column>
              
              <el-table-column align="center" label="课程名称">
                  <template slot-scope="scope">
                    <div v-for="element in scope.row.attachments" :key="element.oid">
                      <div>{{element.title}}</div>
                    </div>
                  </template>
              </el-table-column>
             
              <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                  <el-button type="text" size="small" @click="courseShowDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </el-tabs>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/upload";
import { Message } from "element-ui";
export default {
  data() {
    return {
      list: [
        {
          ii: "888"
        }
      ],
      curriculumListData: [],
      curriculumListShow: [],
      materialData: [],
      demo: {
        name: "",
        wenjianT: ""
      },
      appsData: [],
      wenjian: [],
      courseData: []
    };
  },
  mounted() {
    this.curriculumList();
  },
  methods: {
    courseShowDelete(tab) {
      api.courseShowDelete(tab.oid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.curriculumList();
      });
    },

    getTitles(attachments) {
      let titles = "";
      // alert(JSON.stringify(attachments));
      attachments.forEach(element => {
        titles = titles + element.title + "\n";
      });
      return titles;
    },

    curriculumList() {
      if (document.getElementsByClassName("has-gutter")[1]) {
        document.getElementsByClassName("has-gutter")[1].style.display = "none";
      }
      api.courseGet(this.$route.query.oid).then(response => {
        this.curriculumListData.splice(0, this.curriculumListData.length);
        this.curriculumListData.push(response);
        response.courseContents.map((item, index) => {
          let attachmentsData = [];
          item.attachments.map((item2, i) => {
            attachmentsData.push(item2.title);
            response.courseContents[index]["url"] = JSON.stringify(
              attachmentsData
            )
              .slice(1, JSON.stringify(attachmentsData).length - 1)
              .replace(/"/g, "");
          });
        });
        this.courseData = response.courseContents;
        if (this.courseData.length == 0) {
          document.getElementsByClassName("table-list")[0].style.display =
            "none";
        }
      });
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
.table-list {
  width: 100%;
  border: 1px solid #ebeef5;
  overflow: hidden;
}
.table-list-text p {
  height: 100px;
  line-height: 100px;
}
.table-list .table-list-text {
  float: left;
  width: 25%;
  line-height: 20px;
  text-align: center;
  border-right: 1px solid #ebeef5;
}
.table-list .table-list-content {
  width: 75%;
  float: left;
  line-height: 38px;
  text-align: center;
}
</style>
